<script lang="ts" setup>
  import { ref } from 'vue'

  import { requestUpdateDetectionInfo } from '@/api/business/tracecode/detectionInfo'
  import BottomButton from '@/components/BottomButton/BottomButton.vue'
  import { HttpCodeEnum } from '@/enum/httpEnum'
  import { commonVideo, microbiotaPng } from '@/enum/imageEnum'
  import env from '@/env/index'
  import Layout from './components/Layout.vue'
  import Progress from './components/Progress.vue'
  import {PAGE_TITLE} from '@/enum/pageEnum'
  const props = defineProps<{ detectionInfoId: string }>()
  const goVideo = () =>{
    const { feedId,finderUserName } = env
    uni.openChannelsActivity({ finderUserName, feedId: feedId.collectSample })
  }
  const nextStep = async () => {
    const { responseCode, responseMessage } = await requestUpdateDetectionInfo({
      detectionInfoId: props.detectionInfoId,
      status: 30,
      detectionType: 1,
    })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      uni.navigateTo({
        url: `/pages/detection/express?detectionInfoId=${props.detectionInfoId}`,
      })
    } else {
      uni.showToast({ title: responseMessage, icon: 'none' })
    }
  }
</script>

<template>
  <Layout :title="PAGE_TITLE" :is-scroll="true">
    <template #progress> <Progress step="2" :type="1" name="收集样本" /></template>
    <template #content>
      <view class="tips"> 请根据视频指导完成样本收集！ </view>
      <view class="tips1"> 已收集完成？点击下一步跳过当前步骤 </view>
      <image @click="goVideo" class="video" mode="widthFix" :src="microbiotaPng.videoImg" />
    </template>
    <template #button>
      <BottomButton buttonText="下一步" @on-click="nextStep()" :is-pre="false" />
    </template>
  </Layout>
</template>

<style lang="less" scoped>
  :deep(.content) {
    margin-top: 48rpx !important;
  }

  .tips {
    font-size: 32rpx;
    font-weight: 500;
    color: #08979c;
    text-align: center;
  }

  .tips1 {
    margin: 16rpx 0 48rpx;
    font-size: 28rpx;
    color: #4e5969;
    text-align: center;
  }

  .video {
    width: 100%;
  }
</style>
